<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { getAssetsImge } from '/@/utils/getImge'
import LoginModal from './components/LoginModal.vue'
import { useUserStore } from '/@/store/modules/user'

const searchQuery = ref('')
const showLoginModal = ref(false)
const userStore = useUserStore()

// 定义导航项的类型
interface NavItem {
  id: string
  name: string
  path: string
  children?: NavItem[]
}

const navItems: NavItem[] = [
  {
    id: '1',
    name: '首页',
    path: '/',
  },
  {
    id: '2',
    name: '记账本',
    path: '/home/finance',
  },
  {
    id: '3',
    name: '辅助聊天',
    path: '/home/inter',
  },
  {
    id: '4',
    name: '博客',
    path: '/home/blog'
  },
  {
    id: '5',
    name: '在线聊天',
    path: '/home/chat'
  },
  // {
  //   id: '6',
  //   name: '在线oj',
  //   path: '/home/oj/index',
  // },
  // {
  //   id: '7',
  //   name: '工具网',
  //   path: '/home/tools/index',
  // },
  {
    id: '8',
    name: '聊天机器人',
    path: '/home/aigc',
  },
  // {
  //   id: '9',
  //   name: 'chatbi',
  //   path: '/home/chatbi',
  // },
  // {
  //   id: '10',
  //   name: '任务管理',
  //   path: '/home/task',
  // },
]

// 修改用户状态相关的响应式变量
const isLoggedIn = ref(false)
const userInfo = ref({
  username: '',
  avatar: '',
})

// 监听登录状态变化
watch(() => userStore.isLoggedIn, (newValue) => {
  isLoggedIn.value = newValue
  if (newValue) {
    userInfo.value = {
      username: userStore.username,
      avatar: userStore.avatar
    }
  }
})

// 修改登录处理函数
const handleLogin = () => {
  if (!isLoggedIn.value) {
    showLoginModal.value = true
  }
}

// 修改登出处理函数
const handleLogout = () => {
  userStore.loginOut()
  isLoggedIn.value = false
  userInfo.value = {
    username: '',
    avatar: '',
  }
}

// 初始化用户状态
onMounted(async () => {
  await userStore.initData()
  isLoggedIn.value = userStore.isLoggedIn
  if (userStore.isLoggedIn) {
    userInfo.value = {
      username: userStore.username,
      avatar: userStore.avatar
    }
  }
})

// 添加子菜单显示状态控制
const activeDropdown = ref<string | null>(null)

const showDropdown = (id: string) => {
  activeDropdown.value = id
}

const hideDropdown = () => {
  activeDropdown.value = null
}
</script>

<template>
  <nav class="navbar">
    <div class="nav-container">
      <!-- Logo -->
      <div class="logo">
        <img :src="getAssetsImge('logo.png')" alt="Logo" class="logo-img" />
        <router-link to="/" class="logo-text">飞镖🎯网</router-link>
      </div>

      <!-- 搜索框 -->
      <div class="search-container">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="Search for anything"
          class="search-input"
        />
        <button class="search-button">
          <i class="fa fa-search"></i>
        </button>
      </div>

      <!-- 导航菜单 -->
      <nav class="nav-menu">
        <template v-for="item in navItems" :key="item.id">
          <!-- 没有子菜单的项目 -->
          <router-link
            v-if="!item.children"
            :to="item.path"
            class="nav-item"
            active-class="active"
          >
            {{ item.name }}
          </router-link>

          <!-- 有子菜单的项目 -->
          <div
            v-else
            class="nav-item dropdown"
            @mouseenter="showDropdown(item.id)"
            @mouseleave="hideDropdown"
          >
            <span class="dropdown-trigger">
              {{ item.name }}
              <i class="fa fa-angle-down"></i>
            </span>

            <!-- 子菜单 -->
            <div
              class="dropdown-menu"
              :class="{ show: activeDropdown === item.id }"
            >
              <router-link
                v-for="child in item.children"
                :key="child.id"
                :to="child.path"
                class="dropdown-item"
                active-class="active"
              >
                {{ child.name }}
              </router-link>
            </div>
          </div>
        </template>
      </nav>

      <!-- 添加间隔 div -->
      <div class="nav-spacer"></div>

      <!-- 替换原来的登录按钮为条件渲染 -->
      <div class="user-section">
        <button v-if="!isLoggedIn" class="login-button" @click="handleLogin">
          <i class="fa fa-user"></i>
          <span>登录/注册</span>
        </button>

        <div
          v-else
          class="user-dropdown"
          @mouseenter="showDropdown('user')"
          @mouseleave="hideDropdown"
        >
          <div class="user-info">
            <img
              :src="userInfo.avatar || getAssetsImge('avatar.svg')"
              class="user-avatar"
            />
            <span class="username">{{ userInfo.username }}</span>
            <i class="fa fa-angle-down"></i>
          </div>

          <div
            class="dropdown-menu user-menu"
            :class="{ show: activeDropdown === 'user' }"
          >
            <router-link to="/home/user/profile" class="dropdown-item">
              <i class="fa fa-user-circle"></i>
              个人中心
            </router-link>
            <router-link to="/home/user/settings" class="dropdown-item">
              <i class="fa fa-cog"></i>
              设置
            </router-link>
            <div class="dropdown-divider"></div>
            <a @click="handleLogout" class="dropdown-item logout">
              <i class="fa fa-sign-out"></i>
              退出登录
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- 登录模态框 -->
  <LoginModal :is-open="showLoginModal" @close="showLoginModal = false" />
</template>

<style scoped>
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-img {
  height: 40px;
  width: auto;
}

.logo-text {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
}

.search-container {
  flex: 1;
  max-width: 300px;
  position: relative;
}

.search-input {
  width: 100%;
  padding: 8px 40px 8px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 24px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #1890ff;
}

.search-button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  padding: 8px;
}

.nav-menu {
  margin-left: auto;
  display: flex;
  gap: 24px;
  height: 100%;
  align-items: center;
  margin-right: 0;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  padding: 8px 0;
  position: relative;
  transition: color 0.2s;
}

.nav-item:hover {
  color: #1890ff;
}

.nav-item.active {
  color: #1890ff;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #1890ff;
}

.login-button {
  background-color: #ff5757;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.2s;
}

.login-button:hover {
  background-color: #ff4242;
}

.login-button i {
  font-size: 16px;
}

@media (max-width: 1200px) {
  .nav-menu,
  .nav-spacer {
    display: none;
  }

  .search-container {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .search-container {
    display: none;
  }

  .nav-container {
    padding: 0 16px;
  }

  .logo-text {
    display: none;
  }

  .login-button span {
    display: none;
  }

  .login-button {
    padding: 8px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    justify-content: center;
  }
}

/* 添加下拉菜单相关样式 */
.dropdown {
  position: relative;
  cursor: pointer;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dropdown-trigger i {
  font-size: 12px;
  transition: transform 0.2s;
}

.dropdown:hover .dropdown-trigger i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  min-width: 200px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: white;
}

.dropdown-item {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  transition: all 0.2s;
}

.dropdown-item:hover {
  background: #f5f5f5;
  color: #1890ff;
}

.dropdown-item.active {
  color: #1890ff;
  background: #e6f7ff;
}

/* 添加间隔样式 */
.nav-spacer {
  width: 40px;
}

/* 添加用户相关样式 */
.user-section {
  position: relative;
}

.user-dropdown {
  position: relative;
  cursor: pointer;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: #f5f5f5;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.username {
  font-size: 14px;
  color: #333;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu {
  right: 0;
  left: auto;
  transform: none;
  min-width: 160px;
}

.user-menu::before {
  right: 20px;
  left: auto;
}

.dropdown-item i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

.dropdown-divider {
  height: 1px;
  background-color: #e8e8e8;
  margin: 4px 0;
}

.logout {
  color: #ff4d4f;
}

.logout:hover {
  color: #ff4d4f;
  background-color: #fff1f0;
}

@media (max-width: 768px) {
  .username {
    display: none;
  }

  .user-info {
    padding: 4px;
  }
}
</style>
